<template>
  <div class="main-content">
    <AsyncSearchTable :columns="allColumns"
                      :search-items="searchItems"
                      :fetch-data="fetchRoles">
      <template #status="{ row }">
        <el-tag :type="row.status === '0' ? 'success' : 'danger'">
          {{ row.status === '0' ? '正常' : '停用' }}
        </el-tag>
      </template>
      <template #dataScope="{ row }">
        <el-tag :type="getDataScopeType(row.dataScope)">
          {{ getDataScopeLabel(row.dataScope) }}
        </el-tag>
      </template>
      <template #toolbar>
        <el-button type="primary" :icon="Plus" @click="visible = true">新增</el-button>
        <el-button type="danger" :icon="Delete" @click="handleBatchDelete">批量删除</el-button>
      </template>
      <template #action-column="{row}">
        <el-button type="info" link :icon="View">查看</el-button>
        <el-button type="primary" link :icon="Edit">编辑</el-button>
        <el-button type="success" link :icon="Setting">分配权限</el-button>
        <el-button type="danger" link :icon="Delete">删除</el-button>
      </template>
    </AsyncSearchTable>

    <el-dialog
        :model-value="visible"
        @update:model-value="$emit('update:visible', $event)"
        title="新增角色"
        width="500px"
    >
      <div>新增角色表单</div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import AsyncSearchTable from '@/components/AsyncSearchTable/index.vue'
import * as http from "@/api/http.ts"
import {Delete, Edit, Plus, Setting, View} from "@element-plus/icons-vue"
import type {SearchItem} from "@/types/search.ts"

// 表格多选相关
const selectedRows = ref<any[]>([])
// 所有可用的列配置
const allColumns = [
  {prop: 'roleName', label: '角色名称', width: '150'},
  {prop: 'roleKey', label: '权限字符', width: '150'},
  {prop: 'roleSort', label: '显示顺序', width: '100'},
  {prop: 'status', label: '状态', width: '100'},
  {prop: 'dataScope', label: '数据范围', width: '150'},
  {prop: 'createdTime', label: '创建时间', width: '180'},
  {prop: 'createdBy', label: '创建人', width: '120'},
  {prop: 'remark', label: '备注', width: '200'}
]

const visible = ref(false)

const fetchRoles = async () => {
  try {
    const response = await http.get('/api/roles')
    return response.data
  } catch (error) {
    console.error('获取角色列表失败', error)
    return []
  }
}

// 状态选项
const statusOptions = [
  {label: '全部', value: ''},
  {label: '正常', value: '0'},
  {label: '停用', value: '1'}
]

// 数据范围选项
const dataScopeOptions = [
  {label: '全部数据权限', value: '1'},
  {label: '自定义数据权限', value: '2'},
  {label: '本部门数据权限', value: '3'},
  {label: '本部门及以下数据权限', value: '4'}
]

// 获取数据范围标签
const getDataScopeLabel = (value: string) => {
  const option = dataScopeOptions.find(item => item.value === value)
  return option ? option.label : '未知'
}

// 获取数据范围标签类型
const getDataScopeType = (value: string) => {
  const typeMap: Record<string, string> = {
    '1': 'success',
    '2': 'warning',
    '3': 'info',
    '4': 'primary'
  }
  return typeMap[value] || 'info'
}

// 搜索项配置
const searchItems: SearchItem[] = [
  {
    field: 'roleName',
    label: '角色名称',
    type: 'input',
    placeholder: '请输入角色名称'
  },
  {
    field: 'roleKey',
    label: '权限字符',
    type: 'input',
    placeholder: '请输入权限字符'
  },
  {
    field: 'status',
    label: '状态',
    type: 'select',
    options: statusOptions
  },
  {
    field: 'createdTime',
    label: '创建时间',
    type: 'date'
  }
]

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }

  ElMessageBox.confirm('确认删除所选角色记录?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 实际开发中会调用删除接口
    ElMessage.success('删除成功')
  }).catch(() => {
  })
}
</script>

<style scoped>
</style> 